<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <div id="root">
    {{name}}
    <span>{{message}}</span>
  </div>
</body>
    <script>
    
    const app = document.querySelector('#root');
    
    let data = {
      message: 'yzl',
      name: 22
    }
    
    
    function complier(template, data) {
      let kk = /\{\{(.+?)\}\}/g
      let childNodes = template.childNodes 
      for (let i = 0; i < childNodes.length; i++) {
        let type = childNodes[i].nodeType 
        if (type === 3) {
          let txt = childNodes[i].nodeValue 
          txt = txt.replace(kk, function(_, g){
            let key = g.trim()
            let value = data[key]
            return value
          })
          childNodes[i].nodeValue = txt
        }
        else if (type === 1) { 
          complier(childNodes[i], data)
        }
      }
    }
   
    let gereratetNode = app.cloneNode(true) // 回顾上一节 我们直接复制一份模板,注意因为这里是dome 节点可以用cloneNode克隆一份

    console.log(app)
    complier(gereratetNode, data)
    console.log(gereratetNode)
    root.parentNode.replaceChild(gereratetNode,root)
    // 上面的思路有很大的问题：
    // 1: vue 使用虚拟dome
    // 2: 只考虑了单属性（{{message}}） 二vue中使用了大量的层级（{{message.name}}）
    // 3: 代码没有整合
    </script>
</html>